<template>
  <div class="right-container">
    <h3>Right组件</h3>
    <hr />
    <p>{{ count }}</p>
    <button @click="add">+1</button>
    <p>接收到的来自兄弟组件的值：{{ msg }}</p>
  </div>
</template>

<script>
import bus from "@/components/eventBus.js";

export default {
  data() {
    return {
      count: 0,
      // 接收数据（兄弟传参）
      msg: "",
    };
  },
  methods: {
    // 子组件向父组件传递数据用自定义事件
    add() {
      this.count += 1;
      // 每当调用add时，通过$emit()触发自定义事件
      this.$emit("numchange", this.count);
    },
  },
  created() {
    bus.$on("share", (val) => {
      this.msg = val;
    });
  },
};
</script>

<style lang="less" scoped>
.right-container {
  background-color: skyblue;
  padding: 0px 20px 20px;
  min-height: 250px;
  flex: 1;
}
// h3 {
//   color: yellowgreen;
// }
</style>